<template>
  <div class="page-container">
    <pf-table
      ref="pfTable"
      v-model="form"
      :columns="columns"
      :form-items="formItems"
      @get-table-data="getTableData"
    >
      <template #image="{row}">
        <el-image
          style="width: 100px; height: 100px"
          :src="row.productImages"
          :preview-src-list="[row.productImages]"
        />
      </template>
      <template #handle-area>
        <el-button type="primary" @click="addHandle">发布商品</el-button>
      </template>
      <template #handle="{row }">
        <el-button type="text" :class="row.status === 0? 'danger-text-button':''" size="small" @click="editStatus(row)">{{ row.status === 0 ? '下架': '上架' }}</el-button>
        <el-button type="text" size="small" @click="showDetail(row)">详情</el-button>
        <el-button v-if="row.status === 1" type="text" size="small" @click="editHandle(row)">编辑</el-button>
        <el-button v-if="row.status === 1" type="text" class="danger-text-button" size="small" @click="deleteHandle(row)">删除</el-button>
      </template>
    </pf-table>
    <AddProduct
      v-if="showAddProduct"
      :id="productId"
      :type="type"
      @close="closeHandle"
      @confirm="confirmHandle"
    />
  </div>
</template>

<script>
import { getGasProductList, editGasProductStatus, deleteGasProduct } from '@/api/product'
import AddProduct from './AddProduct.vue'
export default {
  name: 'ProductList',
  components: {
    AddProduct
  },
  data() {
    return {
      type: 'add', // add:新增  edit：编辑  detail:详情
      productId: '',
      form: {},
      loading: false,
      showAddProduct: false
    }
  },
  computed: {
    columns() {
      const attrs = { 'min-width': '100px' }
      return [
        { label: '商品图片', slot: 'image', attrs: { width: '150px' }},
        { label: '商品编号', prop: 'identifier', attrs },
        { label: '商品名称', prop: 'goodsName', attrs },
        { label: '零售价', prop: 'retailPrice', formatter: 'money', attrs },
        { label: '状态', prop: 'statusStr', attrs },
        { label: '发布时间', prop: 'createTime', attrs: { width: '150px' }},
        { label: '发布人', prop: 'createUserName', attrs },
        { label: '操作', slot: 'handle', attrs: { width: '200px', fixed: 'right' }}
      ]
    },
    formItems() {
      return [
        { type: 'input', label: '商品名称', prop: 'goodsName' }
      ]
    }
  },
  created() {},
  methods: {

    getTableData({ pageNo, pageSize, ...formQuery }, done) {
      this.loading = true
      const data = {
        pageNo,
        pageSize,
        ...formQuery
      }
      getGasProductList(data).then(res => {
        this.loading = false
        done({ data: res.data || [], total: res.count || 0 })
      }).catch(() => {
        done({ data: [], total: 0 })
        this.loading = false
      })
    },

    // 修改状态
    editStatus(row) {
      const data = {
        id: row.id,
        status: row.status === 1 ? 0 : 1
      }
      let message = ''
      let tip = ''
      if (row.status === 0) {
        message = '确定要下架该商品吗？'
        tip = '下架成功'
      } else {
        message = '确定要上架该商品吗？'
        tip = '上架成功'
      }
      this.$confirm(message, '提示', {
        type: 'warning'
      }).then(() => {
        editGasProductStatus(data).then(() => {
          this.$message.success(tip)
          this.$refs.pfTable.getTableData()
        }).catch(() => {})
      })
    },

    // 新增
    addHandle() {
      this.type = 'add'
      this.productId = ''
      this.showAddProduct = true
    },

    // 详情
    showDetail(row) {
      this.type = 'detail'
      this.productId = row.id
      this.showAddProduct = true
    },

    // 编辑
    editHandle(row) {
      this.type = 'edit'
      this.productId = row.id
      this.showAddProduct = true
    },

    // 删除
    deleteHandle(row) {
      const data = {
        id: row.id
      }
      this.$confirm('确定删除该商品吗?', '提示', {
        type: 'warning'
      }).then(() => {
        deleteGasProduct(data).then(() => {
          this.$message.success('删除成功')
          this.$refs.pfTable.getTableData()
        }).catch(() => {})
      }).catch(() => {})
    },

    // 关闭弹窗
    closeHandle() {
      this.showAddProduct = false
    },

    // 确认
    confirmHandle() {
      this.$refs.pfTable.getTableData()
    }
  }
}
</script>

<style lang="scss" scoped></style>
